<template>
  <div>
    <el-tabs v-model="active" v-if="name && formConfig.length > 0">
      <el-tab-pane :label="name" name="properties">
        <component :is="(selectNode.type||'').toLowerCase()" :config="selectNode.props"/>
      </el-tab-pane>
      <el-tab-pane label="表单权限设置" name="permissions">
        <form-authority-config/>
      </el-tab-pane>
    </el-tabs>
    <component :is="(selectNode.type||'').toLowerCase()" v-else :config="selectNode.props"/>
  </div>
</template>

<script setup>

// import Approval from './ApprovalNodeConfig.vue'
// import Condition from './ConditionNodeConfig.vue'
// import Delay from './DelayNodeConfig.vue'
// import Cc from './CcNodeConfig.vue'
// import Trigger from './TriggerNodeConfig.vue'
// import FormAuthorityConfig from './FormAuthorityConfig.vue'
import Root from './RootNodeConfig.vue'

import {defineProps,ref, defineEmits,reactive, toRefs, nextTick, onMounted,computed,getCurrentInstance,onBeforeUnmount} from 'vue';

import { useStore } from 'vuex'
const store = useStore()
import {useRouter} from 'vue-router'
const router = useRouter()

const { proxy } = getCurrentInstance()

const emit = defineEmits(['insertNode'])

const active = ref('properties');


const props = defineProps({
  config:{
    type: Object,
    default: () => {
      return {}
    }
  }
})

const selectNode = computed(()=>{
  return store.state.flow.selectedNode
})
const formConfig = computed(()=>{
  return store.state.flow.design.formItems
})
const name = computed(()=>{
  switch (selectNode.type) {
    case 'ROOT':
      return '设置发起人';
    case 'APPROVAL':
      return '设置审批人';
    case 'CC':
      return '设置抄送人';
    default:
      return null;
  }
})
</script>

<style lang="less" scoped>

</style>
